<template>
  HeadButons.vue
  <div class="button-row">
    <el-button @click="showInfo1('func1')">Func 1</el-button>
    <el-button @click="showInfo2('func2')">Func 2</el-button>
  </div>
</template>

<script lang="ts" setup>
import {layoutStatus} from "../../store/LayoutStatus.ts";

const showInfo1 = (data: any) => {
  alert(data);
  layoutStatus().asideButons11vsble = true;
  layoutStatus().asideButons22vsble = false;
  layoutStatus().bodyButons11vsble = true;
  layoutStatus().bodyButons22vsble = false;
}
const showInfo2 = (data: any) => {
  alert(data)
  layoutStatus().asideButons11vsble = false;
  layoutStatus().asideButons22vsble = true;
  layoutStatus().bodyButons11vsble = false;
  layoutStatus().bodyButons22vsble = true;
}
</script>

<style scoped>
.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>
